<template>
  <div>
    <div class="nav van-hairline--bottom">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <div class="fbox"></div>
    <div class="mian">
      <div v-if="firdList.length == 0">
        <van-empty
          image="	https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/res结果.png"
          description="请输入搜索人的昵称哦！"
        />
      </div>
      <div v-else>
        <van-cell v-for="item in firdList" :key="item.UserID">
          <template #title>
            <div class="left-item">
              <img :src="iconUrl + item.userImg" alt="" />
              <p>{{ item.Nickname }}</p>
            </div>
          </template>
          <template #right-icon>
            <div>
              <van-button
                @click="addFriends(item.UserID)"
                class="btnadd"
                round
                type="info"
                >加好友</van-button
              >
            </div>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
// const ws = new WebSocket("ws://localhost:8060");
const ws = new WebSocket("ws://106.55.48.147:8060");
export default {
  data() {
    return {
      value: "",
      firdList: [],
    };
  },
  mounted() {
    ws.addEventListener("open", this.handleWsOpen.bind(this), false);
    ws.addEventListener("close", this.handleWsClose.bind(this), false);
    ws.addEventListener("error", this.handleWsError.bind(this), false);
    ws.addEventListener("message", this.handleWsMessage.bind(this), false);
  },
  created() {},
  computed: {
    ...mapState(["emailLogin"]),
  },
  methods: {
    onSearch() {
      this.Searchuser();
    },
    onCancel() {
      this.value = "";
      this.firdList = [];
      this.$router.push("/Message");
    },
    async Searchuser() {
      const { data: res } = await this.$http.get("SearchUsers", {
        params: { id: this.emailLogin[0].userID, title: this.value },
      });
      this.value = "";
      console.log(res);
      this.firdList = res.data;
    },
    async addFriends(id) {
      const { data: res } = await this.$http.get("queryIsFriends", {
        params: { fid: id },
      });
      if (res.tip === "好友") {
        this.$toast("该用户已是您的好友！");
      } else {
        this.$toast.success("申请已发送！");
        this.sendFriendsRequest(id);
      }
    },
    getUid() {
      ws.send(JSON.stringify({ uid: this.emailLogin[0].userID }));
    },
    handleWsOpen(e) {
      console.log("连接成功：", e);
      this.getUid();
    },
    handleWsClose(e) {
      console.log("连接关闭：", e);
    },
    handleWsError(e) {
      console.log("连接错误：", e);
    },
    async sendFriendsRequest(id) {
      ws.send(
        JSON.stringify({
          id: this.emailLogin[0].userID,
          receive_id: id,
          user: this.emailLogin[0].Nickname,
          dateTime: new Date(),
          userImage: this.emailLogin[0].userImg,
          msg: "非常想和你交个朋友",
          msgType: 3,
        })
      );
      let data = {
        id: this.emailLogin[0].userID,
        receive_id: id,
        user: this.emailLogin[0].Nickname,
        dateTime: new Date(),
        userImage: this.emailLogin[0].userImg,
        msg: "非常想和你交个朋友",
        msgType: 3,
      };
      const { data: res } = await this.$http.post("addfriendsapply", data);
      console.log(res);
    },
    handleWsMessage(e) {
      console.log(e);
    },
  },
};
</script>
<style lang="less" scoped>
.nav {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1200;
}
.left-item {
  display: flex;
  align-items: center;
  p {
    font-family: PingFangSC-Regular;
    font-size: 18px;
    color: #272832;
    letter-spacing: -0.62px;
    margin-left: 16px;
  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}
.btnadd {
  width: 60px;
  height: 26px;
  font-size: 14px;
  padding: 0 6px;
  background: #ffe431;
  border: 1px solid #ffe431;
  color: #272832;
  letter-spacing: -0.41px;
}
</style>